<template>
  <div class="width100 ">
    <div class="main_padd">
      <div>
        首页 > 样音试听 > 示例
      </div>
      <div class="yingyin_list" style="margin-right: -15px;margin-left: -15px;">
        <div class="row justify-content-start align-items-center no-gutters yingyin_list_all">
          <div class="yingtu_name">用途分类:</div>
          <div class="row justify-content-start no-gutters yingyin_list_list onemine">
            <div>全部</div>
            <div>广告配音</div>
            <div>广告配音</div>
            <div class="list_click">广告配音</div>
            <div>广告配音</div>
            <div>广告配音</div>
          </div>
        </div>
        <div class="row justify-content-start align-items-center no-gutters yingyin_list_all">
          <div class="yingtu_name">用途分类:</div>
          <div class="row justify-content-start no-gutters yingyin_list_list onemine">
            <div>全部</div>
            <div>广告配音</div>
            <div>广告配音</div>
            <div class="list_click">广告配音</div>
            <div>广告配音</div>
            <div>广告配音</div>
          </div>
        </div>
        <div class="row justify-content-start align-items-center no-gutters yingyin_list_all">
          <div class="yingtu_name">用途分类:</div>
          <div class="row justify-content-start no-gutters yingyin_list_list onemine">
            <div>全部</div>
            <div>广告配音</div>
            <div>广告配音</div>
            <div class="list_click">广告配音</div>
            <div>广告配音</div>
            <div>广告配音</div>
          </div>
        </div>
        <div class="row justify-content-start align-items-center no-gutters yingyin_list_all">
          <div class="yingtu_name">用途分类:</div>
          <div class="row justify-content-start no-gutters yingyin_list_list onemine">
            <div>全部</div>
            <div>广告配音</div>
            <div>广告配音</div>
            <div class="list_click">广告配音</div>
            <div>广告配音</div>
            <div>广告配音</div>
          </div>
          <div style="margin-left: auto;">123<span class="yellcolorsize">12</span></div>
        </div>
      </div>

      <div style="margin-right: -15px;margin-left: -15px;">
        <div class="row justify-content-around  ">




          <div class="col-12 col-md-4  ">
            <div class="yangyin_List">
              <div class="row justify-content-start no-gutters">
                <div>就广告</div>
                <div class="baiqoain_teans">标签推荐</div>
              </div>
              <div class="row justify-content-between  margin_top no-gutters">
                <div class="yangyin_leixin">酒水饮料</div>
                <div class="row justify-content-around  no-gutters">
                  <div class="margin_leftright"><img class="play_icon" src="../static/play_icon.png" alt=""></div>
                  <div><img class="play_icon" src="../static/dian_icon.png" alt=""></div>
                </div>
              </div>
            </div>

          </div>

          <div class="col-12 col-md-4  ">
            <div class="yangyin_List">
              <div class="row justify-content-start no-gutters">
                <div>就广告</div>
                <div class="baiqoain_teans">标签推荐</div>
              </div>
              <div class="row justify-content-between  margin_top no-gutters">
                <div class="yangyin_leixin">酒水饮料</div>
                <div class="row justify-content-around  no-gutters">
                  <div class="margin_leftright"><img class="play_icon" src="../static/play_icon.png" alt=""></div>
                  <div><img class="play_icon" src="../static/dian_icon.png" alt=""></div>
                </div>
              </div>
            </div>

          </div>
          <div class="col-12 col-md-4  ">
            <div class="yangyin_List">
              <div class="row justify-content-start no-gutters">
                <div>就广告</div>
                <div class="baiqoain_teans">标签推荐</div>
              </div>
              <div class="row justify-content-between  margin_top no-gutters">
                <div class="yangyin_leixin">酒水饮料</div>
                <div class="row justify-content-around  no-gutters">
                  <div class="margin_leftright"><img class="play_icon" src="../static/play_icon.png" alt=""></div>
                  <div><img class="play_icon" src="../static/dian_icon.png" alt=""></div>
                </div>
              </div>
            </div>

          </div>
          <div class="col-12 col-md-4  ">
            <div class="yangyin_List">
              <div class="row justify-content-start no-gutters">
                <div>就广告</div>
                <div class="baiqoain_teans">标签推荐</div>
              </div>
              <div class="row justify-content-between  margin_top no-gutters">
                <div class="yangyin_leixin">酒水饮料</div>
                <div class="row justify-content-around  no-gutters">
                  <div class="margin_leftright"><img class="play_icon" src="../static/play_icon.png" alt=""></div>
                  <div><img class="play_icon" src="../static/dian_icon.png" alt=""></div>
                </div>
              </div>
            </div>

          </div>
          <div class="col-12 col-md-4  ">
            <div class="yangyin_List">
              <div class="row justify-content-start no-gutters">
                <div>就广告</div>
                <div class="baiqoain_teans">标签推荐</div>
              </div>
              <div class="row justify-content-between  margin_top no-gutters">
                <div class="yangyin_leixin">酒水饮料</div>
                <div class="row justify-content-around  no-gutters">
                  <div class="margin_leftright"><img class="play_icon" src="../static/play_icon.png" alt=""></div>
                  <div><img class="play_icon" src="../static/dian_icon.png" alt=""></div>
                </div>
              </div>
            </div>

          </div>
          <div class="col-12 col-md-4  ">
            <div class="yangyin_List">
              <div class="row justify-content-start no-gutters">
                <div>就广告</div>
                <div class="baiqoain_teans">标签推荐</div>
              </div>
              <div class="row justify-content-between  margin_top no-gutters">
                <div class="yangyin_leixin">酒水饮料</div>
                <div class="row justify-content-around  no-gutters">
                  <div class="margin_leftright"><img class="play_icon" src="../static/play_icon.png" alt=""></div>
                  <div><img class="play_icon" src="../static/dian_icon.png" alt=""></div>
                </div>
              </div>
            </div>

          </div>





        </div>
      </div>

      <div class="">
        <nav aria-label="Page navigation example">
          <ul class="pagination justify-content-center align-items-center">
            <li class="page-item">
              <a class="page-link" href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
              </a>
            </li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item active"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item">
              <a class="page-link" href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </li>
          </ul>
        </nav>
      </div>
      <div>
        132
      </div>
    </div>
  </div>
</template>

<script>
  export default {

  }

</script>

<style>
  body {
    background: #F7F7F7;
  }

  .yingyin_list {
    width: 100%;
    padding: 0 30px;
    box-sizing: border-box;
    background: #FFFFFF;
  }

  .yingyin_list_all {
    padding: 30px 0;
    border-bottom: 1px solid #EBEBEB;
  }

  .yingyin_list_list>div {
    margin: 0 8px;
    padding: 4px 6px;
    color: #666666;

  }

  .list_click {
    background: #FF6000 !important;
    padding: 4px 6px;
    border-radius: 4px;
    color: #FFFFFF !important;
  }

  .page-link {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #000000;
    background-color: #fff;
    border: 1px solid #dee2e6;
  }

  .page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #FF6000;
    border-color: #FF6000;
  }

  .yangyin_Listone {
    max-width: calc(33.33% - 24px);
    padding: 12px 20px;
    box-shadow: 0px 0px 6px 1px rgb(0 0 0 / 6%);
    border-radius: 6px;
    margin: 12px 0;
  }

</style>
